<template>
  <div class="login">
    <div class="form">
      <div class="title">
        <span>管理员登录</span>
      </div>
      <div class="opt">
        <div class="label">
          <el-icon>
            <User />
          </el-icon>
        </div>
        <div class="inpbox"><input type="text" v-model="user.admin_email" placeholder="请输入账号/邮箱"></div>
      </div>
      <div class="opt">
        <div class="label">
          <el-icon>
            <Lock />
          </el-icon>
        </div>
        <div class="inpbox"><input type="password" v-model="user.admin_pwd" placeholder="请输入密码"></div>
      </div>
      <div class="opt">
        <div class="label">
          <el-icon>
            <Picture />
          </el-icon>
        </div>
        <div class="inpbox"><input type="text" v-model="user.captcha" placeholder="请输入验证码"></div>
        <div class="vcode" @click="getVerify"><canvas ref="canvas"></canvas></div>
      </div>
      <div class="opt">
        <router-link to="/findpwd">忘记密码?</router-link>
      </div>
      <div class="opt">
        <button class="btn" @click="loginFn">登录</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue"
import { ElMessage } from 'element-plus'
import api from '../api/index'
import { login, test } from '../api/request'
import { useRouter } from 'vue-router'

// 定义变量 记录程序所需的数据
let canvas = ref<Element>()
let pen: any
let w: number = 100
let h: number = 40
let host: string = api.url
// 记录表单信息
type U = {
  admin_email: string
  admin_pwd: string
  captcha: string
}
let user = ref<U>({
  admin_email: "",
  admin_pwd: "",
  captcha: "",
})

// 获取路由实例对象
const $router = useRouter();

// 编写登录函数
const loginFn = async () => {
console.log(111);

  let { admin_email, admin_pwd, captcha } = user.value;
  // console.log({account , password ,captcha})
  if (admin_email && admin_pwd && captcha) {
    console.log(222)
    // 先验证码是否为机器人
    let isShow;
    await test({ captcha })
      .then(
        content => {
          // console.log(333);
          if (content.code == 200) {
            // 执行登录逻辑
            isShow = true;
            // console.log(444);
            
          }
          else {
            // console.log(555);
            // 验证失败
            ElMessage({
              type: 'error',
              message: content.msg
            })
          }
        }
      )

    if (isShow) {
      // console.log({account , password, role: 1})
      // 执行登录逻辑
      await login({ admin_email , admin_pwd})
        .then(
          content => {
            let { code, msg } = content;
            //  console.log(666);
             console.log(code);
             console.log(msg);
             
             
            if (code == 200) {
              // console.log(777);
              
              let { admin_email, token } = content;
              // 本地存储缓存用户昵称、临时身份
              localStorage.setItem('NICK_NAME', admin_email)
              localStorage.setItem('TOKEN', token)
              // 登录成功
              ElMessage({
                type: 'success',
                message: content.msg
              })

              // 延迟跳转首页
              setTimeout(() => {
                $router.replace({ path: '/' })
              }, 150);
            }
            else {
              console.log(888);
              
              // 登陆失败
              ElMessage({
                type: 'error',
                message: content.msg
              })
            }
          }
        )
    }

  }
  else {
    // console.log(2)
    ElMessage({
      type: 'error',
      message: "输入框不能为空",
    })
  }
}


// 挂载钩子函数（初始化）
onMounted(() => {
  let ele = canvas.value as HTMLCanvasElement;
  let img = new Image();
  img.src = `${host}/api/verify/captcha`
  if (ele) {
    ele.width = w;
    ele.height = h;
    pen = ele.getContext('2d');
    img.onload = () => {
      pen.drawImage(
        img,
        0,
        0,
        w,
        h
      )
    }
  }
})

// 点击获取验证码
const getVerify = () => {
  let img = new Image();
  img.src = `${host}/api/verify/captcha?${Math.random()}`;
  pen.clearRect(0, 0, w, h);
  img.onload = () => {
    pen.drawImage(
      img,
      0,
      0,
      w,
      h
    )
  }
}

</script>

<style lang="scss">
@import '../common/scss/variable.scss';

.login {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  // background-color: skyblue;
  background-image: url(../common/img/bg1-5.png);
  background-size: cover;
  background-repeat: no-repeat;

  .form {
    width: 450px;
    border: 1px solid #f0f0f0;
    padding: 15px 20px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #fbeed7fa;
    box-shadow: 1px 1px 10px #999; 

    .title {
      text-align: center;
      padding: 20px 0;

      span {
        display: inline-block;
        border-bottom: 2px solid #e95b47;
        padding: 10px 10px;
        color: #e95b47;
      }
    }

    .opt {
      width: 100%;
      display: flex;
      height: 42px;
      margin-bottom: 10px;

      .label {
        width: 50px;
        height: 40px;
        background-color: #b2ab73;
        border: 1px solid #ccc;
        border-right: 0;
        flex-shrink: 0;
        text-align: center;
        line-height: 40px;
      }

      .inpbox {
        width: calc(100% - 50px);

        input {
          font-size: 16px;
          height: 40px;
          line-height: 40px;
          display: block;
          border: 1px solid #ccc;
          width: 100%;
          padding-left: 10px;
          background-color: rgba(252, 247, 247, 0.5);
        }
      }

      a {
        color: #666666;
        font-size: 15px;
      }

      .btn {
        width: 100%;
        height: 40px;
        background-color: #b2ab73;
        font-size: 16px;
        color: #fff;
        cursor: pointer;
      }

      canvas {
        cursor: pointer;
        margin-left: 10px;
      }
    }
  }
}
</style>